import "https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"; //引入第三方的类库
import "https://cdn.bootcdn.net/ajax/libs/jquery.lazyload/1.9.1/jquery.lazyload.min.js"; //引入懒加载的插件
import "./jquery.pagination.js"; //引入分页的插件
function renderlist() {
    //1.渲染列表
    $.ajax({
        url: 'http://10.31.155.14:81/2104_me/nike/php/list.php',
        dataType: 'json',
    }).done(function(data) {
        let arrData = data.pagecontent;
        let str = '';
        $.each(arrData, function(index, value) {
            str += `
            <li>
                <a href="detail.html?sid=${value.sid}">
                <img src="${value.url}"/>
                <p>${value.title}</p>
                <span>￥${value.price}</span>
                <span>${value.sailnumber}</span>
                </a>
            </li>
            `;
        });
        $('.list ul').html(str);
        //使用懒加载
        $('.lazy').lazyload({ effect: "fadeIn" });
        //分页插件
        $('.page').pagination({
            pageCount: data.pagesize,
            jump: true,
            coping: true,
            homePage: '首页',
            endPage: '末页',
            prevContent: '上页',
            nextContent: '下页',
            callback: function(api) {
                console.log(api.getCurrent()); //获取当前点击的页面
                //将页面传输给后端，后端返回对应的数据，重新进行渲染。
                $.ajax({
                    url: 'http://10.31.155.14:81/2104_me/nike/php/list.php',
                    data: {
                        page: api.getCurrent()
                    },
                    dataType: 'json',
                }).done(function(data) {
                    let arrData = data.pagecontent; //接口数据
                    let str = '';
                    $.each(arrData, function(index, value) { //数组的索引和值
                        //通过a标签将列表页商品对应的sid通过地址栏传输给详情页面。
                        str += `
                        <li>
                        <a href="detail.html?sid=${value.sid}">
                        <img src="${value.url}"/>
                        <p>${value.title}</p>
                        <span>￥${value.price}</span>
                        <span>${value.sailnumber}</span>
                        </a>
                    </li>
                            `;
                    });
                    $('.list ul').html(str);
                    $('.lazy').lazyload({ effect: "fadeIn" }); //重新添加懒加载
                });
            }
        });

    })

}

export {
    renderlist
}